<template>
    <div class="bigbox">
    <div class="box">
        <div class="pre-box" ref="preRef">
            <h1>WELCOME</h1>
            <p>JOIN US!</p>
            <div class="img-box">
                <img src="../assets/img/lo1.jpg" alt="" id="avatar">
            </div>
        </div>
    <div class="register-form">
        <div class="title-box">
            <h1>注册</h1>
        </div>
        <el-form ref="registerformRef" :model="registerform" :rules="rules">
        <el-form-item>
            <el-input type="text" placeholder="账号" :suffix-icon="User" v-model="registerform.no" />
        </el-form-item>
        <el-form-item>
            <el-input type="text" placeholder="用户名" :suffix-icon="User" v-model="registerform.name" />
        </el-form-item>
        <el-form-item>
            <el-input type="password" placeholder="密码" :suffix-icon="Lock" v-model="registerform.password" />
        </el-form-item>


        </el-form>
        <div class="btn-box">
            <button @click="register">注册</button>
            <p @click="mySwitch">已有账号？去登录</p>
        </div>
    </div>
    <div class="login-form">
        <div class="title-box">
            <h1>登录</h1>
        </div>
        <el-form ref="loginFormRef" :model="loginform" :rules="rules">
            <el-form-item>
            <el-input type="text" placeholder="用户名" :suffix-icon="User" v-model="loginform.no"/>
        </el-form-item>
        <el-form-item>
            <el-input type="password" placeholder="密码" :suffix-icon="Lock" v-model="loginform.password" />
        </el-form-item>
        </el-form>
        <div class="btn-box">
                <button @click="submitForm">登录</button>
                <p @click="mySwitch">没有账号?去注册</p>
        </div>
    </div>
    </div>
    </div>
</template>


<script setup>
import axios from "axios"
import{Lock,User}from'@element-plus/icons-vue'
const{ref}=require("@vue/reactivity")
import mySwitch from '@/utills/mySwitch'
import api from '@/api/login.js'
import {reactive} from 'vue'
import {ElMessage} from "element-plus";
import router from "@/router/index";
const loginform =reactive({
    no:'',
    password:''
})
const registerform =reactive({
    name:'',
    no:'',
    password:'',
    role_id:2

})
const loginFormRef=ref('')
const registerformRef=ref('')
const rules= reactive({
    no: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度应该在3-5个字符之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度应该在6-15个字符之间', trigger: 'blur' },
  ],
  confirmpassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 5, message: '长度应该在6-15个字符之间', trigger: 'blur' },
  ],
})


/* const submitForm1=()=>{
  loginFormRef.value.validate((valid)=>{
    if(valid){
      localStorage.setItem('user',JSON.stringify(res.data))
      router.push('./home')
    }else{
      console.log('error!!!');
      return false;
    }
  })
} */

const submitForm=()=>{
  loginFormRef.value.validate((valid)=>{
    if(valid){
        axios.post('http://localhost:8090/user/login',loginform).then(res=>res.data).then(res=>{
            if(res.code==200){
                //存储
                localStorage.setItem('user',JSON.stringify(res.data))
                //跳转
                router.push('./home')
            }else{
                alert('登录失败');
                return false;
            }
        })
      
      
    }else{
      console.log('error!!!');
      return false;
    }
  })
}

const register=()=>{
    registerformRef.value.validate((valid)=>{
    if(valid){
        axios.post('http://localhost:8090/user/save',registerform).then(res=>res.data).then(res=>{
            if(res==true){
                alert('注册成功');
                //跳转
                history.go(0)
            }else{
                alert('注册失败');
                return false;
            }
        })
      
      
    }else{
      console.log('error!!!');
      return false;
    }
  })
}

// const login=()=>{
//   loginFormRef.value.validate((valid)=>{
//     if(valid){
//       api.loginApi(loginform).then(res=>{
//         console.log('login',res)
//         if(res.status==0){
//           ElMessage.success(res.messeage)
//           window.localStorage.setItem('token',res.token)
//           router.push('./im')
//         }
//       }).catch(error=>{
//         console.log(error)
//       })
//     }
//     else{
//       return
//     }
//   })
//   api.loginApi(loginform).then(res=>{
//     console.log('login',res)
//     if(res.status==0){
//       ElMessage.success(res.messeage)
//       window.localStorage.setItem('token',res.token)
//       router.push('./im')
//     }
//   }).catch(error=>{
//     console.log(error)
//   })
// }

/* const register=()=>{
  registerformRef.value.validate((valid)=>{
    if(valid){
      api.registerApi(registerform).then(res=>{
        if(res.status==0){
          ElMessage.success(res.messeage)
        }
      }).catch(error=>{
        console.log(error);
      })
    }
    else{
      return
    }
  })
} */


</script>

<style scoped>
    input{
    outline: none;
}


.bigbox{
    height: 100vh;
    display: flex;
    background: linear-gradient(to right,rgb(247,200,215),rgb(191,227,241));
}
.box{
    width: 1050px;
    height: 600px;
    display: flex;
    position: relative;
    /* background-color: #fff; */
    margin: auto;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 4px 4px 3px rgba(0, 0, 0,.1);
}
.pre-box{
    z-index: 100;
    width: calc(1050px/2);
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 4px;
    background-color: #edd4dc;
    box-shadow: 4px 4px 3px rgba(0, 0, 0,.1);
    transition: 0.5s ease-in-out;
}
.pre-box h1{
    margin-top: 150px;
    text-align: center;
    letter-spacing: 5px;
    color: white;
    text-shadow: 4px 4px 3px rgba(0, 0, 0,.1);
}
.pre-box p{
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 20px 0;
    color: white;
    font-weight: bold;
    text-shadow: 4px 4px 3px rgba(0, 0, 0,.1);
}
.img-box{
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 4px 4px 3px rgba(0, 0, 0,.1);
}
.img-box img{
    width: 100%;
    transition: 0.5s;
}

.login-form,
.register-form{
    z-index: 1;
    flex:1;
    height: 100%;
}
.title-box{
    height: 300px;
    line-height: 500px;
}
.title-box h1{
    text-align: center;
    color: white;
    letter-spacing: 5px;
    text-shadow: 4px 4px 3px rgba(0, 0, 0,.1);
}
.el-form{
    display: flex;
    flex-direction:column;
    align-items: center;
}
.el-form-item{
    width: 65%;
}
input{
    /* width: 60%; */
    height: 40px;
    margin-bottom: 20px;
    text-indent:4px ;
    border: 1px solid #b0cfe9;
    border-radius:4px ;
}
input:focus{
    color: #b0cfe9;
}
input:focus::placeholder{
    opacity: 0;
}
.btn-box{
    display: flex;
    justify-content: center;
}
button{
    width: 100px;
    height: 30px;
    margin: 0 7px;
    line-height: 30px;
    border: none;
    border-radius: 4px;
    background-color: #69b3f0;
    color: white;
}
button:hover{
    cursor: pointer;
    opacity: .8;
}
.btn-box p{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: white;
}
.btn-box p:hover{
    cursor: pointer;
    border-bottom:1px solid white;
}
</style>